<template>
	<u-popup
		:show="showModal"
		@close="showModal=false"
		:closeOnClickOverlay="false"
		:closeable="true"
		mode="bottom"
		round="10"
	>
		<view style="text-align: center;padding: 20rpx;font-size: 15px;font-weight: bold;">添加报名信息</view>
			<view>
				<view style="position: relative;min-height: 600rpx;padding: 20rpx;overflow: hidden;background-color: white;">
					<u--form
							labelPosition="left"
							:model="model1"
							:rules="rules"
							ref="form1"
							:labelWidth="50"
					>
						<u-form-item
								label="姓名"
								prop="userInfo.name"
								borderBottom
								ref="item1"
						>
							<u--input
									v-model="model1.userInfo.name"
									border="none"
							></u--input>
						</u-form-item>
						<u-form-item
								label="性别"
								prop="userInfo.sex"
								borderBottom
								@click="showSex = true; hideKeyboard()"
								ref="item1"
						>
							<u--input
								v-model="model1.userInfo.sex"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择性别"
								border="none"
							></u--input>
							<template #right>
								<u-icon
									name="arrow-right"
								></u-icon>
							</template>
						</u-form-item>
						<u-form-item
							label="电话"
							prop="userInfo.phone_number"
							borderBottom
							ref="item1"
						>
							<u--input
								v-model="model1.userInfo.phone_number"
								placeholder="手机号"
								border="none"
								type="number"
							></u--input>
						</u-form-item>
						<u-form-item
							label="身份证"
							prop="userInfo.phone_number"
							borderBottom
							ref="item1"
						>
							<u--input
								v-model="model1.userInfo.phone_number"
								placeholder="身份证"
								border="none"
								type="number"
							></u--input>
						</u-form-item>
					</u--form
					>
					<u-action-sheet
							:show="showSex"
							:actions="actions"
							title="请选择性别"
							description="如果选择保密会报错"
							@close="showSex = false"
							@select="sexSelect"
					>
					</u-action-sheet>

			</view>
			
			<view style="
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
			padding: 20rpx;
			color: white;
			
			">
				<view style="
					border-radius: 10rpx;
					background-color: #ee935e;
					padding: 30rpx;
					box-shadow: 0 0 15px 0px #ee935e99;
				">
					添加
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				showModal:false,
				showSex: false,
				model1: {
					userInfo: {
						name: 'uview-plus UI',
						sex: '',
						id_number:'',
						phone_number:''
					},
				},
				actions: [{
					name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				]
			}
		},
		methods:{
			show() {
				this.showModal = true
			},
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				//this.$refs.form1.validateField('userInfo.sex')
			}
		}
	}
</script>

<style>
</style>